﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>07_动画纹理</title>
    <script src="../js/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000); // 透视投影相机
        var renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var light = new THREE.DirectionalLight(0xffffff); // 平行光
        light.position.set(10, 10, 10).normalize();
        scene.add(light);

        // 视频
        var video = document.createElement('video');
        video.src = "../video/sintel.webm";
        video.autoplay = true;
        video.muted = true;
        video.loop = true;
        video.load();
        video.play();

        // 视频每一帧
        var videoImage = document.createElement('canvas');
        videoImage.width = 320;
        videoImage.height = 300;

        videoImageContext = videoImage.getContext('2d');
        videoImageContext.fillStyle = '#000000';
        videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);

        // 贴图
        var videoTexture = new THREE.Texture(videoImage);
        var geometry = new THREE.BoxGeometry(30, 30, 30);
        var material = new THREE.MeshBasicMaterial({ map: videoTexture });
        var box = new THREE.Mesh(geometry, material);
        scene.add(box);

        camera.position.set(0, 0, 100);
        camera.lookAt(0, 0, 0);

        var render = function () {
            box.rotation.x += 0.01;
            box.rotation.y += 0.01;
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                videoImageContext.drawImage(video, 0, 0);
                if (videoTexture)
                    videoTexture.needsUpdate = true;
            }
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        render();
    </script>
</body>
</html>
